<style lang="scss" scoped>
  .app-container {
    > p {
      font-size: 18px;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .header {
      .el-form {
        left: 224px;
        top: 104px;
        min-height: 55px;
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 20px;

        .el-form-item {
          margin-bottom: 10px;

          ::v-deep .el-form-item__label {
            opacity: 1;
            /** 文本1 */
            font-size: 14px;
            font-weight: 400;
            letter-spacing: -0.07px;
            line-height: 32px;
            color: rgba(3, 2, 2, 1);
            text-align: right;
          }

          ::v-deep .el-form-item__content {

            .el-input {
              width: 165px;

              .el-input__inner {
                width: 165px;
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 10px;
              }
            }

            .el-button {
              height: 32px;
              opacity: 1;
              border-radius: 2px;
              background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
              padding: 8px 18px;
              color: #fff;
              border: none;
              margin-left: 25px;

              &:hover {
                border: none;
                background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
              }

              &:nth-child(1) {
                width: 60px;
                height: 32px;
                opacity: 1;
                border-radius: 2px;
                background: rgba(242, 243, 245, 1);
                color: rgba(0, 0, 0, 0.3);
                padding: 8px 16px 8px 16px;

                &:hover {
                  border: none;
                  background: rgb(228, 228, 228);
                }
              }
            }
          }
        }
      }
    }

    .content {
      opacity: 1;
      border-radius: 10px;
      background: rgba(255, 255, 255, 1);
      padding-top: 15px;
      padding-bottom: 20px;

      .el-tabs {
        margin-left: 50px;

        ::v-deep .el-tabs__item {
          color: rgba(188, 195, 212, 1);
          font-size: 14px;
        }

        ::v-deep .is-active {
          color: rgba(94, 129, 244, 1) !important;
          opacity: 1;
          /** 文本1 */
          font-size: 15px;
          font-weight: 700;
          letter-spacing: 0px;
          color: rgba(94, 129, 244, 1);
        }

        ::v-deep .el-tabs__active-bar {
          background-color: rgba(94, 129, 244, 1) !important;
        }
      }

      ::v-deep .el-table .el-table__header-wrapper th,
      .el-table .el-table__fixed-header-wrapper th {
        height: 41px !important;
        border-radius: 10px 10px, 0px, 0px;
        background: rgba(83, 90, 244, 0.1);

        /** 文本1 */
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0px;
        line-height: 11.72px;
        color: rgba(83, 90, 244, 1);
        text-align: center;
        vertical-align: top;
      }
    }
  }

  ::v-deep .el-dialog {
    width: 395px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    p {
      opacity: 1;
      margin: 0 0 0 20px;
      /** 文本1 */
      font-size: 18px;
      font-weight: 400;
      color: rgba(17, 38, 60, 1);
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 10px;
      margin-bottom: 15px;
      margin-left: 0;
    }

    .el-input {
      width: 165px;

      .el-input__inner {
        width: 165px;
        border: 1px solid rgba(127, 127, 213, 0.5);
        border-radius: 10px;
      }
    }

    .el-button {
      width: 60px;
      height: 32px;
      opacity: 1;
      border-radius: 2px;
      background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
      padding: 8px 16px 8px 16px;
      color: #fff;
      border: none;
      margin-left: 25px;

      &:hover {
        border: none;
        background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);
      }

      &:nth-child(2) {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: rgba(242, 243, 245, 1);
        color: rgba(0, 0, 0, 0.3);
        padding: 8px 16px 8px 16px;

        &:hover {
          border: none;
          background: rgb(228, 228, 228);
        }
      }
    }

    .el-input-number {
      width: 165px;

      .el-input {
        width: 165px;

        .el-input__inner {
          width: 165px;
          border: 1px solid rgba(127, 127, 213, 0.5);
          border-radius: 0px;
        }
      }
    }

    .el-dialog__title {
      border-left: 3px solid rgba(84, 91, 245, 1);
      padding-left: 8px;
    }
  }
</style>
<template>
  <div class="app-container">
    <p>手机管理</p>
    <div class="header">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="状态" prop="phoneStatus">
          <el-select clearable v-model="queryParams.phoneStatus" placeholder="请输入状态" @keyup.enter.native="handleQuery">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号" prop="phoneCode">
          <el-input v-model="queryParams.phoneCode" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item label="备注" prop="phoneRemark">
          <el-input v-model="queryParams.phoneRemark" placeholder="请输入备注" clearable @keyup.enter.native="handleQuery"/>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="resetQuery">重置</el-button>
          <el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
          <el-button type="primary" plain size="mini" @click="handleAdd" v-hasPermi="['business:phone:add']">新增
          </el-button>
        </el-form-item>
      </el-form>
      <!-- <el-row :gutter="10" class="mb8">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
              v-hasPermi="['system:management:edit']">修改</el-button>
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
              v-hasPermi="['system:management:remove']">删除</el-button>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
              v-hasPermi="['system:management:export']">导出</el-button>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row> -->
    </div>

    <div class="content">
      <el-tabs v-model="activePhone" @tab-click="handlePhone">
        <el-tab-pane label="手机卡" name="first"></el-tab-pane>
      </el-tabs>
      <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange">
        <el-table-column label="编号" align="center" width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center" prop="phoneType" width="120">
          <template slot-scope="scope">
                        <span v-if="scope.row.phoneType == 1" style="
                        display: inline-block;
width: 80px;
opacity: 1;
border-radius: 6px;
color: rgba(0, 179, 167, 1);
font-size: 14px;
background: rgba(237, 251, 252, 1);
text-align: center;
">手机号</span>
          </template>
        </el-table-column>
        <el-table-column label="编号" align="center" prop="phoneCode" width="180"/>
        <el-table-column label="手机号" align="center" prop="phoneNumber" width="180"/>
        <el-table-column label="备注" align="center" prop="phoneRemark" width="180"/>
        <el-table-column label="状态" align="center" prop="phoneStatus">
          <template slot-scope="scope">
            <el-switch active-color="rgba(73, 230, 136, 1)" inactive-color="rgba(255, 181, 181, 1) "
                       v-model="scope.row.phoneStatus" active-value="1" inactive-value="2"
                       @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="腾讯QQ" align="center" prop="tencentQq"/>
        <el-table-column label="微信" align="center" prop="wechat"/>
        <el-table-column label="网易邮箱" align="center" prop="neteaseEmail"/>
        <el-table-column label="米哈游账号" align="center" prop="mihoyoAccount"/>
        <el-table-column label="网易手机" align="center" prop="neteasePhone"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['business:phone:edit']">
              <span style="color: rgba(94, 129, 244, 1);">编辑 </span>
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)" v-hasPermi="['business:phone:remove']">
              <span style="color: rgba(252, 153, 121, 1);">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList"/>
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="编号" prop="phoneCode">
          <el-input v-model="form.phoneCode" placeholder="请输入编号"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号"/>
        </el-form-item>
        <el-form-item label="号码备注" prop="phoneRemark">
          <el-input v-model="form.phoneRemark" placeholder="请输入号码备注"/>
        </el-form-item>
        <el-form-item label="运营商" prop="phoneOperator">
          <el-select v-model="form.phoneOperator" placeholder="请选择运营商">
            <el-option v-for="item in operatorOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <p>可用</p>
        <!-- <el-form-item v-for="item in bindingChannelList" :key="item.dictCode" :label="item.dictLabel"
            :prop="item.dictCode">
            <el-input-number :min="0" v-model="form[item.dictCode]" placeholder="请输入数字" />
        </el-form-item> -->

        <el-form-item label="腾讯QQ" prop="tencentQq">
          <el-input-number :min="0" v-model="form.tencentQq" placeholder="请输入数字"/>
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input-number :min="0" v-model="form.wechat" placeholder="请输入数字"/>
        </el-form-item>
        <el-form-item label="网易邮箱" prop="neteaseEmail">
          <el-input-number :min="0" v-model="form.neteaseEmail" placeholder="请输入数字"/>
        </el-form-item>
        <el-form-item label="米哈游账号" prop="mihoyoAccount">
          <el-input-number :min="0" v-model="form.mihoyoAccount" placeholder="请输入数字"/>
        </el-form-item>
        <el-form-item label="网易手机" prop="neteasePhone">
          <el-input-number :min="0" v-model="form.neteasePhone" placeholder="请输入数字"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {listManagement, getManagement, delManagement, addManagement, updateManagement} from "@/api/business/phone";

    export default {
        name: "Management",
        data() {
            return {
                bindingChannelList: [],
                operatorOptions: [
                    {label: '联通', value: '联通'},
                    {label: '电信', value: '电信'},
                    {label: '移动', value: '移动'},
                    {label: '其他', value: '其他'},
                ],
                options: [
                    {label: '启用', value: '1'},
                    {label: '停用', value: '2'},
                ],
                activePhone: 'first',
                // 遮罩层
                loading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 表格数据
                managementList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    phoneCode: null,
                    phoneType: null,
                    phoneNumber: null,
                    phoneRemark: null,
                    phoneStatus: null,
                    tencentQq: null,
                    wechat: null,
                    neteaseEmail: null,
                    mihoyoAccount: null,
                    neteasePhone: null,
                    phoneOperator: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {}
            };
        },
        created() {
            this.getList();
            //查询绑定渠道列表
            this.getDicts('binding_channel').then(res => {
                this.bindingChannelList = res.data
            })
        },
        methods: {
            // 状态修改
            handleStatusChange(row) {
                let text = row.phoneStatus == "1" ? "启用" : "停用";
                this.$modal.confirm('确认要' + text + '吗？').then(function () {
                    return updateManagement({
                        ...row,
                        phoneStatus: row.phoneStatus
                    });
                }).then(() => {
                    this.$modal.msgSuccess(text + "成功");
                }).catch(function () {
                    row.phoneStatus = row.phoneStatus === "1" ? "2" : "1";
                });
            },
            //切换TAB
            handlePhone(tab, event) {
                console.log(tab, event);
            },
            /** 查询列表 */
            getList() {
                this.loading = true;
                listManagement(this.queryParams).then(response => {
                    this.managementList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    phoneId: null,
                    phoneCode: null,
                    phoneType: null,
                    phoneNumber: null,
                    phoneRemark: null,
                    phoneStatus: null,
                    tencentQq: null,
                    wechat: null,
                    neteaseEmail: null,
                    mihoyoAccount: null,
                    neteasePhone: null,
                    createBy: null,
                    createTime: null,
                    delFlag: null,
                    remark: null,
                    updateBy: null,
                    updateTime: null,
                    phoneOperator: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.phoneId)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "新增";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const phoneId = row.phoneId || this.ids
                getManagement(phoneId).then(response => {
                    this.form = response.data;
                    console.log(this.form);
                    this.open = true;
                    this.title = "修改";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    console.log(this.form);
                    if (valid) {
                        if (this.form.phoneId != null) {
                            updateManagement(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addManagement(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const phoneIds = row.phoneId || this.ids;
                this.$modal.confirm('是否确认删除编号为"' + phoneIds + '"的数据项？').then(function () {
                    return delManagement(phoneIds);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                this.download('system/management/export', {
                    ...this.queryParams
                }, `management_${new Date().getTime()}.xlsx`)
            }
        }
    };
</script>
